<template>
  <div class="shipment-rank-page">
    <!-- 页面标题 -->
    <div class="page-title">出货排行汇总</div>

    <!-- 返回按钮 -->
    <el-button type="text" class="return-btn" @click="handleReturn">返回</el-button>

    <!-- 数据表格（匹配截图颜色、列顺序） -->
    <el-table
      :data="tableData"
      border
      class="data-table"
      style="width: 100%"
      :header-cell-style="headerCellStyle"
      :cell-style="cellStyle"
    >
      <!-- 带排序标识的列 -->
      <el-table-column prop="rank" label="排名" align="center" />
      <el-table-column prop="shipmentQty" label="出货量" align="center" class-name="sort-column" />
      <el-table-column prop="serial" label="序号" align="center" class-name="sort-column" />
      <el-table-column prop="productCode" label="产品编号" align="center" class-name="sort-column" />
      <el-table-column prop="productName" label="产品名称" class-name="sort-column" />
      <el-table-column prop="brand" label="归属品牌" />
      <el-table-column prop="spec" label="规格" align="center" />
      <el-table-column prop="type" label="类型" align="center" class-name="sort-column" />
      <el-table-column prop="retailPrice" label="零售价" align="right" class-name="sort-column" />
      <el-table-column prop="discount" label="折扣" align="center" />
      <el-table-column prop="discountPrice" label="折扣价" align="right" />
      <el-table-column prop="specialPrice" label="特价" align="right" />
      <el-table-column prop="seckillPrice" label="秒杀价" align="right" />
      <el-table-column prop="totalAmount" label="出货总金额" align="right" class-name="sort-column total-amount" />
      <el-table-column label="操作" align="center" class-name="sort-column">
        <template #default="scope">
          <el-button type="primary" size="mini" class="detail-btn" @click="openDetailDialog(scope.row)">明细</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页区（匹配截图样式） -->
    <div class="pagination-area">
      <div class="total-info">共3条 共3页</div>
      
      <div class="page-controls">
        <el-button type="text" icon="el-icon-arrow-left" @click="prevPage" :disabled="currentPage === 1" />
        <el-button
          v-for="page in pageList"
          :key="page"
          :class="currentPage === page ? 'page-btn active' : 'page-btn'"
          @click="currentPage = page"
        >
          {{ page }}
        </el-button>
        <el-button type="text" icon="el-icon-arrow-right" @click="nextPage" :disabled="currentPage === totalPages" />
      </div>

      <div class="page-size">
        <el-select v-model="pageSize" @change="handlePageSizeChange" size="mini" class="size-select">
          <el-option label="10条/页" value="10" />
        </el-select>
      </div>

      <div class="jump-area">
        <span>跳至</span>
        <el-input v-model="jumpPage" size="mini" class="jump-input" @keyup.enter="handleJump" />
        <span>页</span>
        <el-button type="primary" size="mini" class="jump-btn" @click="handleJump">确定</el-button>
      </div>
    </div>

    <!-- 明细弹窗（匹配新截图） -->
    <el-dialog 
      v-model="detailDialogVisible" 
      title="出货排行汇总明细" 
      width="1400px"
      :header-style="{ padding: '10px 20px', borderBottom: '1px solid #e0e0e0' }"
      :custom-class="['detail-dialog']"
    >
      <!-- 弹窗顶部操作栏 -->
      <div class="dialog-header-actions" style="display: flex; justify-content: flex-end; gap: 8px; margin-bottom: 16px;">
        <el-button 
          type="primary" 
          size="mini"
          style="background: #00b42a; border-color: #00b42a;"
          @click="handlePrint"
        >
          打印
        </el-button>
        <el-button 
          type="primary" 
          size="mini"
          style="background: #1890ff; border-color: #1890ff;"
          @click="handleDialogExport"
        >
          导出
        </el-button>
        <el-button 
          type="text" 
          size="mini"
          @click="detailDialogVisible = false"
        >
          返回
        </el-button>
      </div>

      <!-- 弹窗表格（匹配新截图列） -->
      <el-table
        :data="dialogTableData"
        border
        class="dialog-data-table"
        style="width: 100%"
        :cell-style="{ textAlign: 'center' }"
        :header-cell-style="{ background: '#f5f5f5', textAlign: 'center' }"
      >
        <el-table-column prop="serial" label="序号" width="60" />
        <el-table-column prop="orderNo" label="订单编号" width="100" />
        <el-table-column prop="saleDate" label="销售日期" width="100" />
        <el-table-column prop="shopName" label="店名" width="100" />
        <el-table-column prop="contact" label="联系人" width="80" />
        <el-table-column prop="phone" label="手机号" width="120" />
        <el-table-column prop="productName" label="产品名称" width="120" />
        <el-table-column prop="productCode" label="产品编号" width="100" />
        <el-table-column prop="brand" label="归属品牌" width="120" />
        <el-table-column prop="spec" label="规格" width="80" />
        <el-table-column prop="type" label="类型" width="80" />
        <el-table-column prop="retailPrice" label="零售价" width="100" />
        <el-table-column prop="discount" label="折扣" width="80" />
        <el-table-column prop="discountPrice" label="折扣价" width="100" />
        <el-table-column prop="buyQty" label="购买数量" width="100" />
        <el-table-column 
          prop="totalAmount" 
          label="销售总金额" 
          width="120"
          :cell-style="{ background: '#ffebee', color: '#f44336' }"
        />
      </el-table>

      <!-- 弹窗分页（匹配新截图样式） -->
      <div class="dialog-pagination-area" style="display: flex; align-items: center; gap: 10px; margin-top: 12px; font-size: 14px;">
        <div class="dialog-total-info">共10条 共10页</div>
        
        <div class="dialog-page-controls">
          <el-button type="text" icon="el-icon-arrow-left" @click="dialogPrevPage" :disabled="dialogCurrentPage === 1" size="mini" />
          <el-button
            v-for="page in dialogPageList"
            :key="page"
            :class="dialogCurrentPage === page ? 'dialog-page-btn active' : 'dialog-page-btn'"
            @click="dialogCurrentPage = page"
            size="mini"
          >
            {{ page }}
          </el-button>
          <el-button type="text" icon="el-icon-arrow-right" @click="dialogNextPage" :disabled="dialogCurrentPage === dialogTotalPages" size="mini" />
        </div>

        <div class="dialog-page-size">
          <el-select v-model="dialogPageSize" @change="handleDialogPageSizeChange" size="mini" style="width: auto;">
            <el-option label="10条/页" value="10" />
          </el-select>
        </div>

        <div class="dialog-jump-area">
          <span>跳至</span>
          <el-input v-model="dialogJumpPage" size="mini" style="width: 40px; margin: 0 4px;" @keyup.enter="handleDialogJump" />
          <span>页</span>
          <el-button type="primary" size="mini" @click="handleDialogJump">确定</el-button>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus';
// 若实际项目中使用xlsx导出，需引入：import * as XLSX from 'xlsx';

// 主表格数据
const tableData = ref([
  {
    rank: 1,
    shipmentQty: '56985',
    serial: 1,
    productCode: 'MC4545',
    productName: '丝芙兰',
    brand: '丝芙兰精华眼霜',
    spec: '10ml',
    type: '套盒',
    retailPrice: '¥111.62',
    discount: '1.0',
    discountPrice: '¥123.98',
    specialPrice: '¥123.98',
    seckillPrice: '¥111.62',
    totalAmount: '¥10000',
    // 明细数据（匹配新截图）
    details: Array.from({length: 10}, (_, i) => ({
      serial: i + 1,
      orderNo: '1534356',
      saleDate: '2024.2.5',
      shopName: '21世纪',
      contact: '张飞',
      phone: '15836971568',
      productName: i % 2 === 0 ? '爽肤水' : '眉笔',
      productCode: 'Mc1267',
      brand: '阿玛尼',
      spec: '20ml',
      type: '单品',
      retailPrice: '¥1000',
      discount: '8',
      discountPrice: '¥900',
      buyQty: 10,
      totalAmount: '¥8000'
    }))
  },
  {
    rank: 2,
    shipmentQty: '5696',
    serial: 2,
    productCode: 'MC4545',
    productName: '丝芙兰',
    brand: '丝芙兰精华液',
    spec: '10ml',
    type: '单品',
    retailPrice: '¥111.62',
    discount: '1.0',
    discountPrice: '¥123.98',
    specialPrice: '¥123.98',
    seckillPrice: '¥111.62',
    totalAmount: '¥1000',
    details: []
  },
  {
    rank: 3,
    shipmentQty: '569',
    serial: 3,
    productCode: 'MC4545',
    productName: '丝芙兰',
    brand: '丝芙兰口红',
    spec: '10ml',
    type: '单品',
    retailPrice: '¥111.62',
    discount: '1.0',
    discountPrice: '¥123.98',
    specialPrice: '¥123.98',
    seckillPrice: '¥111.62',
    totalAmount: '¥100',
    details: []
  }
]);

// 主页面分页状态
const currentPage = ref(1);
const pageSize = ref('10');
const totalPages = ref(3);
const jumpPage = ref('');
const pageList = ref([1, 2, 3, 4]);

// 明细弹窗状态
const detailDialogVisible = ref(false);
const currentDetailRow = ref(null);
const dialogTableData = ref([]);
// 弹窗分页状态
const dialogCurrentPage = ref(1);
const dialogPageSize = ref('10');
const dialogTotalPages = ref(10);
const dialogJumpPage = ref('');
const dialogPageList = ref([1, 2, 3, 4]);

// 表头样式
const headerCellStyle = () => {
  return {
    background: '#fff',
    fontWeight: 'normal',
    position: 'relative'
  };
};

// 单元格样式
const cellStyle = ({ row, column }) => {
  const rowIndex = tableData.value.findIndex(item => item.rank === row.rank);
  const colors = ['#ffebee', '#fff8e1', '#e8f5e9'];
  const textColors = {
    shipmentQty: '#f44336',
    totalAmount: '#f44336'
  };

  return {
    background: colors[rowIndex] || '#fff',
    color: textColors[column.prop] || '#333'
  };
};

// 打开明细弹窗
const openDetailDialog = (row) => {
  currentDetailRow.value = row;
  dialogTableData.value = [...row.details];
  dialogCurrentPage.value = 1; // 重置分页
  detailDialogVisible.value = true;
};

// 弹窗打印功能
const handlePrint = () => {
  // 实际项目中可调用浏览器打印API，或结合打印组件
  ElMessageBox.confirm(
    '确定要打印当前明细数据吗？',
    '提示',
    {
      type: 'info'
    }
  ).then(() => {
    // 模拟打印逻辑
    setTimeout(() => {
      ElMessage.success('打印任务已提交');
    }, 500);
  }).catch(() => {});
};

// 弹窗导出功能（实际项目需结合xlsx库）
const handleDialogExport = () => {
  if (dialogTableData.value.length === 0) {
    ElMessage.warning('无数据可导出');
    return;
  }

  // 模拟导出逻辑（实际代码参考）
  // const ws = XLSX.utils.json_to_sheet(dialogTableData.value);
  // const wb = XLSX.utils.book_new();
  // XLSX.utils.book_append_sheet(wb, ws, "出货明细");
  // XLSX.writeFile(wb, "出货排行汇总明细.xlsx");

  ElMessage.success('明细数据已导出为Excel文件');
};

// 弹窗分页方法
const dialogPrevPage = () => dialogCurrentPage.value > 1 && dialogCurrentPage.value--;
const dialogNextPage = () => dialogCurrentPage.value < dialogTotalPages.value && dialogCurrentPage.value++;
const handleDialogPageSizeChange = (size) => {
  dialogPageSize.value = size;
  ElMessage.info(`已切换为${size}条/页`);
};
const handleDialogJump = () => {
  const page = Number(dialogJumpPage.value);
  if (page && page >= 1 && page <= dialogTotalPages.value) {
    dialogCurrentPage.value = page;
  } else {
    ElMessage.warning('请输入1-10的页码');
  }
  dialogJumpPage.value = '';
};

// 主页面分页方法
const prevPage = () => currentPage.value > 1 && currentPage.value--;
const nextPage = () => currentPage.value < totalPages.value && currentPage.value++;
const handlePageSizeChange = (size) => {
  pageSize.value = size;
  ElMessage.info(`已切换为${size}条/页`);
};
const handleJump = () => {
  const page = Number(jumpPage.value);
  if (page && page >= 1 && page <= totalPages.value) {
    currentPage.value = page;
  } else {
    ElMessage.warning('请输入1-3的页码');
  }
  jumpPage.value = '';
};

// 返回按钮
const handleReturn = () => ElMessage.info('已返回上一页');
</script>

<style scoped>
.shipment-rank-page {
  padding: 20px;
  font-family: "Microsoft Yahei", sans-serif;
  background: #fff;
  position: relative;
}

/* 页面标题 */
.page-title {
  font-size: 16px;
  color: #333;
  margin-bottom: 16px;
  font-weight: 500;
}

/* 返回按钮 */
.return-btn {
  position: absolute;
  top: 20px;
  right: 20px;
  padding: 0;
  color: #666;
}

/* 表格样式 */
.data-table {
  --el-table-border-color: #dcdcdc;
  --el-table-row-hover-bg-color: transparent;
}

/* 带排序标识的列 */
.sort-column .cell::after {
  content: "▼";
  font-size: 10px;
  color: #999;
  margin-left: 4px;
  vertical-align: middle;
}

/* 出货总金额列 */
.total-amount .cell {
  color: #f44336;
  font-weight: 500;
}

/* 明细按钮 */
.detail-btn {
  background: #26c6da;
  border-color: #26c6da;
  padding: 2px 8px;
  font-size: 12px;
}

/* 分页区样式 */
.pagination-area {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  color: #666;
  margin-top: 12px;
  padding-top: 8px;
  border-top: 2px solid #26c6da;
}

.total-info {
  margin-right: 5px;
}

.page-controls {
  display: flex;
  align-items: center;
  gap: 4px;
}

.page-btn {
  width: 24px;
  height: 24px;
  padding: 0;
  border: 1px solid #dcdcdc;
  background: #fff;
  cursor: pointer;
}

.page-btn.active {
  background: #26c6da;
  color: #fff;
  border-color: #26c6da;
}

.size-select {
  width: auto;
}

.jump-area {
  display: flex;
  align-items: center;
  gap: 4px;
}

.jump-input {
  width: 40px;
}

.jump-btn {
  background: #26c6da;
  border-color: #26c6da;
  padding: 2px 8px;
}

/* 明细弹窗样式 */
.detail-dialog {
  --el-dialog-body-padding: 0 20px 20px;
}

.dialog-data-table {
  --el-table-border-color: #dcdcdc;
}

/* 弹窗分页样式 */
.dialog-pagination-area {
  padding-top: 8px;
  border-top: 1px solid #e0e0e0;
}

.dialog-page-btn {
  width: 24px;
  height: 24px;
  padding: 0;
  border: 1px solid #dcdcdc;
  background: #fff;
  cursor: pointer;
}

.dialog-page-btn.active {
  background: #26c6da;
  color: #fff;
  border-color: #26c6da;
}
</style>